<template>
  <div>
    <el-row>
      <el-button
        icon="el-icon-refresh"
        type="primary"
        plain
        size="medium"
        @click="RefreshPersonRight()"
        >刷新中间件用户权限信息</el-button
      >
    </el-row>
    <div style="height: 15px"></div>
    <el-form :model="FIndexAdmin" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="用户名称">
            <el-input v-model="FIndexAdmin.FAdminName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属公司">
            <el-input v-model="FIndexAdmin.FMyCompanyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属角色">
            <el-input v-model="FIndexAdmin.FRoleName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs
      ref="myTabs"
      :style="styleObject"
      v-model="FIndexName"
      @tab-click="handleClick"
    >
      <el-tab-pane label="个人数据权限" name="company">
        <el-row>
          <el-button type="primary" plain size="medium" @click="openData">
            刷新
          </el-button>
        </el-row>
        <div style="height: 15px"></div>
        <el-table
          :data="FRightCompanyTreeList"
          style="width: 100%; overflow-y: auto"
          default-expand-all
          highlight-current-row
          row-key="FCompanyID"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="FCompanyName" label="结构名称">
          </el-table-column>
          <el-table-column prop="FCompanyClassName" label="结构类型">
          </el-table-column>
          <el-table-column prop="FCompanyStatus" label="关联状态">
          </el-table-column>
          <el-table-column prop="FQueryStatus" label="查询权限">
          </el-table-column>
          <el-table-column prop="FAddStatus" label="新增权限">
          </el-table-column>
          <el-table-column prop="FEditStatus" label="编辑权限">
          </el-table-column>
          <el-table-column prop="FDelStatus" label="删除权限">
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template #default="scope">
              <el-button
                type="primary"
                plain
                size="mini"
                @click="onRightCompanyEdit(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="个人角色关联" name="role">
        <el-row>
          <el-button type="primary" plain size="medium" @click="openData">
            刷新
          </el-button>
        </el-row>
        <div style="height: 15px"></div>
        <el-table
          :data="FRoleTreeList"
          style="width: 100%; overflow-y: auto"
          default-expand-all
          highlight-current-row
          row-key="FRoleID"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="FRoleCode" label="角色代码"> </el-table-column>
          <el-table-column prop="FRoleName" label="角色名称"> </el-table-column>
          <el-table-column prop="FRoleStatus" label="关联状态">
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template #default="scope">
              <el-button
                type="primary"
                plain
                size="mini"
                @click="onRoleEidt(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="数据权限设定"
      v-model="FShowCompanyAddRight"
      destroy-on-close
    >
      <el-form :model="FIndexRightCompany" label-width="80px">
        <el-form-item label="结构名称">
          <el-input
            v-model="FIndexRightCompany.FCompanyName"
            readonly
            ReadOnlyColor
          ></el-input>
        </el-form-item>
        <el-form-item label="结构类型">
          <el-input
            v-model="FIndexRightCompany.FCompanyClassName"
            readonly
            ReadOnlyColor
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="FIndexRightCompany.FCompanyStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="关联启用"
            inactive-text="关联禁用"
            active-value="启用"
            inactive-value="禁用"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="FIndexRightCompany.FQueryStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="查询启用"
            inactive-text="查询禁用"
            active-value="启用"
            inactive-value="禁用"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="FIndexRightCompany.FAddStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="新增启用"
            inactive-text="新增禁用"
            active-value="启用"
            inactive-value="禁用"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="FIndexRightCompany.FEditStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="编辑启用"
            inactive-text="编辑禁用"
            active-value="启用"
            inactive-value="禁用"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="FIndexRightCompany.FDelStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="删除启用"
            inactive-text="删除禁用"
            active-value="启用"
            inactive-value="禁用"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="FShowCompanyAddRight = false">取 消</el-button>
          <el-button type="primary" @click="onSaveEdit()">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="角色绑定" v-model="FShowRoleAddRight" destroy-on-close>
      <el-form :model="FIndexRole" label-width="80px">
        <el-form-item label="角色代码">
          <el-input
            v-model="FIndexRole.FRoleCode"
            readonly
            ReadOnlyColor
          ></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input
            v-model="FIndexRole.FRoleName"
            readonly
            ReadOnlyColor
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="FIndexRole.FRoleStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="关联启用"
            inactive-text="关联禁用"
            active-value="启用"
            inactive-value="禁用"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="FShowRoleAddRight = false">取 消</el-button>
          <el-button type="primary" @click="onSaveRoleEdit()">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script  lang="ts">
import {
  TBaseAdmin,
  TBaseRole,
  TPersonRightCompany,
  TPersonRole,
} from "@/baselib/right/BaseRightClass";
import { Options } from "vue-class-component";
import TFormBase from "@/views/BaseForm";
import elmHelper from "@/views/model/elmHelper";
//配合着用
@Options({
  name: "TFormPersonRightEdit",
  components: {},
  computed: {},
  data() {},
})
export default class TFormPersonRightEdit extends TFormBase {
  declare $refs: {
    myTabs: any;
  };
  private styleObject: any = {
    "margin-top": "10px",
    height: "200px",
    "overflow-y": "auto",
  };

  private FIndexName: string = "company";
  private FIndexAdmin: TBaseAdmin = new TBaseAdmin();
  //
  private FIndexRightCompany: TPersonRightCompany = new TPersonRightCompany();
  private FRightCompanyList: TPersonRightCompany[] = [];
  private FRightCompanyTreeList: any = [];
  private FShowCompanyAddRight: boolean = false;
  //
  private FIndexRole: TPersonRole = new TPersonRole();
  private FRoleList: TPersonRole[] = [];
  private FRoleTreeList: any = [];
  private FShowRoleAddRight: boolean = false;
  //
  public created() {
    this.FIndexAdmin = this.zIndexTag?.menuParams.admin;
    if (this.$myStrHelper.stringIsEmptyYW(this.FIndexAdmin.FAdminID)) {
      this.$myMsgHelp.msgDialog("用户数据为空");
      return;
    }
    this.openPersonCompany();
    this.openPersonRole();
  }

  private async openData() {
    if (this.FIndexName == "company") {
      this.openPersonCompany();
    } else {
      this.openPersonRole();
    }
  }
  private async openPersonCompany() {
    let lResult = await this.$myBaseRightAPI.getPersonRightCompanyList(
      this.FIndexAdmin.FAdminID
    );
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FRightCompanyList = lResult.resultData;
    this.FRightCompanyTreeList = elmHelper.dataAddchildren(
      this.FRightCompanyList,
      "FCompanyID",
      "FPCompanyID"
    );
  }

  private async openPersonRole() {
    let lResult = await this.$myBaseRightAPI.GetPersonRoleList(
      this.FIndexAdmin.FAdminID
    );
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FRoleList = lResult.resultData;
    this.FRoleTreeList = elmHelper.dataAddchildren(
      this.FRoleList,
      "FRoleID",
      "FPRoleID"
    );
  }

  private onRightCompanyEdit(qRight: TPersonRightCompany) {
    this.FIndexRightCompany = qRight;
    this.FShowCompanyAddRight = true;
  }
  private onRoleEidt(qRole: TPersonRole) {
    this.FIndexRole = qRole;
    this.FShowRoleAddRight = true;
  }
  private async onSaveEdit() {
    let lResult = await this.$myBaseRightAPI.savePersonRightCompany(
      this.FIndexRightCompany
    );
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FShowCompanyAddRight = false;
  }

  private async onSaveRoleEdit() {
    let lResult = await this.$myBaseRightAPI.SavePersonRole(this.FIndexRole);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FShowRoleAddRight = false;
  }
  private async RefreshPersonRight() {
    let lResult = await this.$myBaseRightAPI.RefreshPersonRight(
      this.FIndexAdmin.FAdminID
    );
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose("刷新用户个人权限成功");
  }

  public mounted() {
    //自适应列表高
    this.$nextTick(() => {
      if (this.$refs.myTabs.$el != null) {
        let lHeight =
          window.innerHeight - this.$refs.myTabs.$el.offsetTop - 120;
        this.styleObject = {
          "margin-top": "10px",
          height: lHeight + "px",
          "overflow-y": "auto",
        };
      }
    });
    window.addEventListener("resize", () => {
      this.$nextTick(() => {
        if (this.$refs.myTabs.$el != null) {
          let lHeight =
            window.innerHeight - this.$refs.myTabs.$el.offsetTop - 120;
          this.styleObject = {
            "margin-top": "10px",
            height: lHeight + "px",
            "overflow-y": "auto",
          };
        }
      });
    });
  }
}
</script>
